<template>
  <el-dropdown placement="top">
    <span class="el-dropdown-link">
      <el-badge is-dot class="item">
        <nuxt-link to="/news">动态</nuxt-link>
      </el-badge>
    </span>
    <el-dropdown-menu slot="dropdown">
      <el-dropdown-item
        @click.native="routerPush(route.path)"
        v-for="route in navNews"
        :key="route.path"
      >
        <el-badge :value="route.count" :max="99" class="item">{{route.title}}</el-badge>
      </el-dropdown-item>
    </el-dropdown-menu>
  </el-dropdown>
</template>

<script lang='ts'>
import { Component, Vue } from "nuxt-property-decorator";

@Component
export default class extends Vue {
  newsRoutes: {}[] = [];
  get navNews(){
    return this.$store.state.navModule.navNews;
  }
  routerPush(path: string) {
    this["$router"].push(path);
  }
}
</script>

<style lang='less' scoped>
a {
  .wh(auto, 48px);
  padding-left: 15px;
  padding-right: 15px;
  display: inline-block;
  line-height: 48px;
  color: #222;
  &:hover {
    text-decoration: none;
  }
}
::v-deep(.el-badge__content.is-fixed.is-dot) {
  transform: unset;
  top: 10px;
}
</style>